<template>
	<div class="articleCate">
		<el-card shadow="hover">
			<div class="resources-ictures mb15">
				<el-form ref="formDataRef" :inline="true" :model="searchForm" label-width="120px" class="demo-form-inline">
					<el-row>
						<el-col :span="10">
							<el-form-item prop="name" label="关键词:" style="width: 100%">
								<el-input maxlength="200" v-model="searchForm.name" placeholder="关键词" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="10">
							<div style="padding-left: 10px">
								<el-button type="primary" @click="init">搜索</el-button>
								<el-button @click="resetFrom">重置</el-button>
							</div>
						</el-col>
						<el-col :span="4">
							<div style="padding-left: 10px; text-align: right">
								<el-button type="success" @click="toAdd">新增分类</el-button>
							</div>
						</el-col>
					</el-row>
				</el-form>
				<el-table :data="tableData" style="width: 100%" v-loading="loading">
					<el-table-column type="index" label="序号" width="60">
						<template #default="scope">
							<span>{{ (page.current - 1) * page.pageSize + scope.$index + 1 }}</span>
						</template>
					</el-table-column>
					<el-table-column label="父级分类" show-overflow-tooltip>
						<template #default="scope">
							<span>{{ scope.row.parId === 0 || scope.row.parId === null ? '根分类' : cateFormat(scope.row.parId) }}</span>
						</template>
					</el-table-column>
					<el-table-column prop="name" label="分类名称" show-overflow-tooltip />
					<el-table-column label="创建时间" show-overflow-tooltip>
						<template #default="scope">
							<span>{{ $filters.timeFormat(scope.row.createTime) }}</span>
						</template>
					</el-table-column>
					<el-table-column label="排序" show-overflow-tooltip>
						<template #default="scope">
							<span>{{ scope.row.score }}</span>
						</template>
					</el-table-column>
					<el-table-column label="状态">
						<template #default="scope">
							<MySwitch v-model="scope.row.showStatus" @change="changeStatus(scope.row)" :disabled="scope.row.id === 1 || scope.row.id === 2" />
						</template>
					</el-table-column>
					<el-table-column fixed="right" label="操作" width="120px" align="center">
						<template #default="scope">
							<el-button text type="primary" :disabled="scope.row.id === 1 || scope.row.id === 2" @click="toEdit(scope.row)">编辑</el-button>
							<el-popconfirm title="请确认是否删除？" @confirm="deleArticleCate(scope.row.id)">
								<template #reference>
									<el-button text type="danger" :disabled="scope.row.id === 1 || scope.row.id === 2">删除</el-button>
								</template>
							</el-popconfirm>
						</template>
					</el-table-column>
				</el-table>
				<el-pagination
					@size-change="onHandleSizeChange"
					@current-change="onHandleCurrentChange"
					class="mt15"
					:pager-count="5"
					:page-sizes="[10, 20, 30]"
					v-model:current-page="page.current"
					background
					v-model:page-size="page.pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="page.total"
				>
				</el-pagination>
			</div>
		</el-card>
		<el-dialog :close-on-click-modal="false" :title="title" v-model="addDialogVisible" width="600px">
			<div class="form_wrap" style="padding: 20px">
				<el-form ref="formRef" :model="ruleForm" :rules="rules" label-width="80px">
					<el-form-item prop="parId" label="上级分类">
						<el-select v-model="ruleForm.parId">
							<el-option label="根分类" :value="0" />
							<el-option v-for="item in pCateList" :key="item.id" :label="item.name" :value="item.id" />
						</el-select>
					</el-form-item>
					<el-form-item prop="name" label="分类名称">
						<el-input show-word-limit maxlength="200" v-model="ruleForm.name" placeholder="请输入分类名称"></el-input>
					</el-form-item>
					<el-form-item prop="score" label="排序">
						<el-input-number v-model="ruleForm.score" label="请输入数字，越大越排前"></el-input-number>
					</el-form-item>
					<el-form-item label="是否启用">
						<MySwitch v-model="ruleForm.showStatus" />
					</el-form-item>
				</el-form>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="addDialogVisible = false">取 消</el-button>
					<el-button type="primary" :loading="saveLoading" @click="toSave">保 存</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>
<script setup name="ArticleCate">
import { ElMessage } from 'element-plus';
import { useArticleApi } from '/@/api/article';
import { rules, useAdd, useSearch } from './hook';
import { useCateFormat } from '/@/views/article/list/hook';
import { deepCopy } from '/@/utils';

const { delArticleCate } = useArticleApi();
const { page, tableData, searchForm, loading, init } = useSearch();
const { cateFormat, pCateList, initCateList } = useCateFormat();
const { toAdd, toEdit, toSave, changeStatus, title, addDialogVisible, ruleForm, formRef, saveLoading } = useAdd(init);
const defaultFrom = ref(null);
const formDataRef = ref();
const resetFrom = () => {
	formDataRef.value.resetFields();
};

const deleArticleCate = async (id) => {
	let res = await delArticleCate(id);
	if (res.code !== 200) return;
	ElMessage.success('删除成功！');
	init();
	initCateList();
};

// 分页改变
const onHandleSizeChange = (val) => {
	page.value.pageSize = val;
	init();
};
// 分页改变
const onHandleCurrentChange = (val) => {
	page.value.current = val;
	init();
};
// 页面加载时
onMounted(() => {
	defaultFrom.value = deepCopy(searchForm.value);
});
</script>
<style lang="scss" scoped></style>
